<template>
  <div class="boxs margin_top">
    <headers></headers>
    <div class="content" :class="!ismobile ? 'pce' : 'mobe'">
      <div v-html="detail.content">

      </div>
      <div class="btn" @click="golink">进 入</div>
    </div>
  </div>
</template>

<script>


import Swiper from 'swiper'
import 'swiper/css/swiper.min.css'
import { WOW } from "wowjs";
import bottoms from "./modle/bottoms.vue"
import swiper from "./modle/swiper.vue"
import headers from "./modle/headers.vue"
import titleline from "./modle/titleline.vue"
import hengscroll from "./modle/hengscroll.vue"
export default {
  name: 'HelloWorld',
  components: {
    headers,
    bottoms,
    titleline,
    hengscroll, swiper
  },
  data() {
    return {
      detail: {},
      ismobile: ""
    }
  },
  created() {
    this.get_partners()
  },
  methods: {
    golink() {
      alert(this.detail.website)
      window.open(this.detail.website)
    },
    get_partners() {
      this.$api.get(
        "/api/PortalHome/get_partners_details",
        {
          id: this.$route.query.id
        },
        (r) => {
          this.detail = r.DATA
        },
        (f) => { }
      );
    },
  },
  mounted() {

    this.ismobile = this.isMobile()
    let that = this;
    window.addEventListener('resize', function () {
      that.ismobile = that.isMobile()
    });

    // 顶部轮播图
    new Swiper('.swiper-container', {
      loop: true,
      autoplay: {
        delay: 3000,
        stopOnLastSlide: false,
        disableOnInteraction: false,
      },
      pagination: {
        el: '.swiper-pagination',
        dynamicBullets: true,
        dynamicMainBullets: 2,
        clickable: true,
      },
    })


  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.mobe {
  padding: 0 20px;
  box-sizing: border-box;
}

.btn {
  width: 10rem;
  margin: 0 auto;
  background: #268bd2;
  color: white;
  text-align: center;
  line-height: 2rem;
  border-radius: 0.9rem;
  font-size: 1rem;
  margin-bottom: 5rem;
  margin-top: 2rem;
}

/deep/.content img {
  width: 100%;
  height: auto;
}

.pce {
  margin-top: 2rem;
  width: 1000px;
  margin: 0 auto;
  margin-top: 15rem;
  margin-bottom: 2rem;
}
</style>
